/**
* @description: 物资预览
* @author: JiWei
* @remark:
**/
<template>
  <view class="arrive-container">
    <nav-bar class="header" back title="物资预览" @goBack="goBack"/>
    <view class="arrive-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="basic-info">
        <van-form>
          <van-field  v-model="engName" disabled label="工程名称" placeholder="请选择工程名称"
                      type="textarea" autosize
                      :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" required
                      right-icon="arrow" error-message-align="right" @click="onOpenPicker('engName')" />
          <van-field v-model="siteName" disabled label="站点名称" placeholder="请选择站点名称"
                     :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" required
                     right-icon="arrow" error-message-align="right" @click="onOpenPicker('siteName')" />
        </van-form>
      </view>
      <view>
<!--        第一层-->
        <van-collapse v-model="historyActiveNames" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">历史到货</text>
              </view>
            </template>
<!--     第二层       -->
            <van-collapse v-model="historyActiveTwo" accordion v-for="(item, index) in historyList" :key="index">
              <van-collapse-item class="arrive-second" :name="item.ID" size="large">
                <template #title>
                  <view>
                    <img class="imgHistory" src="../../../../static/controlImg/wzyl.png" alt="">
                    <text class="small-title">{{ item.sighForDate }} {{item.stationName}}</text>
                  </view>
                </template>
                <view class="history-main">
                  <view class="image-list" v-for="(imgItem,imgIndex) in item.files" :key="imgIndex">
                    <img :src="baseUrl + imgItem.furl" alt="" @click="imageHandle(imgIndex,imgItem,'history')">
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
          </van-collapse-item>
        </van-collapse>
      </view>
      <view>
        <!--        第一层-->
        <van-collapse v-model="activeNamesList" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">到货清单</text>
              </view>
            </template>
            <!--     第二层       -->
            <van-collapse v-model="arriveListSecond" accordion v-for="(item, index) in arriveList" :key="index">
              <van-collapse-item class="arrive-second" :name="item.ID" size="large">
                <template #title>
                  <view>
                    <img class="imgHistory" src="../../../../static/controlImg/wzyl.png" alt="">
                    <text class="small-title">{{ item.sighForDate }} {{item.stationName}}</text>
                  </view>
                </template>
                <view class="history-main">
                  <view class="image-list" v-for="(imgItem,imgIndex) in item.files" :key="imgIndex">
                    <img :src="baseUrl +  imgItem.furl" alt="" @click="imageHandle(imgIndex,imgItem,'arrive')">
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
          </van-collapse-item>
        </van-collapse>
      </view>
    </view>
  
    <!-- 选择工程名称 -->
    <van-popup v-model="showSelectProject" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="projectNameColumns"
                  @confirm="onConfirm" @cancel="showSelectProject = false" />
    </van-popup>
    <!--  选择站点名称  -->
    <van-popup v-model="showSelectSite" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="siteNameColumns"
                  @confirm="onConfirmSite" @cancel="showSelectSite = false" />
    </van-popup>
    <!-- 图片预览 -->
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar.vue";
import plateTitle from '../../common/plateTitle.vue'
import {mapGetters} from "vuex";
import {Dialog,Toast} from "vant";
import config from "../../../../common/config";

export default {
  name: 'materialPreview',
  components: {navBar,plateTitle },
  props: {},
  data() {
    return {
      baseUrl:'',
      engName:'',
      engId:'',
      siteName:'',
      siteId:'',
      showSelectProject: false,
      showSelectSite: false,
      projectNameColumns:[],
      siteNameColumns:[],
      pickerName: '工程名称',
      historyActiveNames: '1', // 历史到货
      historyActiveTwo:[], //历史到货二级
      arriveListSecond:[], // 到货清单 二级
      historyList:[],
      activeNamesList: '1', // 到货清单
      arriveList:[],
      files:[],
      showPreview:false,
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad(option) {
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';
    })
    this.engId = option.engId
    this.siteId = option.stationId
	this.siteName = option.siteName
	this.engName = option.engName
	this.getQueryMaterial()
  },
  methods: {
    imageHandle(imgIndex, imgItem, handleType) {
      if(handleType === 'history') {
        this.files = [
          { img: this.baseUrl + imgItem.furl }
        ]
        this.showPreview = true
      }else if(handleType === 'arrive') {
        this.files = [
          { img: this.baseUrl + imgItem.furl }
        ]
        this.showPreview = true
      }
    },
    // 获取工程名称
    getProjectName() {
      let params = {
        userId: this.userData.USERID,
      }
      this.$apiRequest.gcgkApi.getEngListByUserId(params).then(res => {
        this.projectNameColumns = res.data.map(item => {
          return {
            text: item.ENG_NAME,
            value: item.OBJ_ID,
          };
        })
      })
    },
    // 获取站点名称
    getSiteName() {
      let params = {
        engId: this.engId
      }
      this.$apiRequest.gcgkApi.getEngSiteList(params).then(res => {
        this.siteNameColumns = res.data.map(item => {
          return {
            text: item.stationName,
            value: item.stationId,
          };
        })
      })
    },
    // 获取数据详情
    getQueryMaterial() {
      let params = {
        engId: this.engId,
        stationId: this.siteId,
      }
      this.$apiRequest.gcgkApi.queryMaterial(params).then(res => {
          this.historyList = res.data.panorama.map((item,index) => {
            Object.assign(item,{ID: index})
            return {...item}
          })
          this.arriveList = res.data.inventory.map((item,index) => {
            Object.assign(item,{ID: index})
            return {...item}
          })
      }).catch(
          Toast('请先选择工程名称及站点名称')
      )
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/index/index'
      })
    },
    onOpenPicker(e) {
      if(e === 'engName') {
        this.getProjectName()
        this.showSelectProject = true
      }else if(e === 'siteName')  {
        this.pickerName = '站点名称'
        if(this.engName === '') {
          Dialog.alert({
            message: "请先选择工作名称",
            theme: "round-button"
          });
        }else {
          this.getSiteName()
          this.showSelectSite = true;
        }
      }
    },
    onConfirm(value) {
      this.engName  = value.text
      this.engId = value.value
      this.siteName = ''
      this.showSelectProject = false
    },
    // 获取站点名称
    onConfirmSite(value) {
      this.siteName = value.text
      this.siteId = value.value
      this.showSelectSite = false
      this.getQueryMaterial()
    },
  }
};
</script>
<style scoped lang="scss">
.van-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .van-swipe {
    width: 100%;
    height: 60%;

    .van-swipe-item {
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}
.arrive-fold /deep/.van-cell {
  background: #F2F6FA;
}
/deep/.van-collapse-item__content {
  padding: 0 0 !important;
  background: #F2F6FA;
}
/deep/.van-cell--large {
  padding: px2vh(16) px2vw(20);
}
.arrive-second /deep/.van-cell {
  background: #fff;
}
/deep/.van-hairline--top-bottom {
  margin-bottom: px2vh(20);
}
.arrive-container {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .arrive-content {
    width: calc(100vw - #{px2vw(60)});
    height: calc(100vh - #{px2vh(226)});
    margin: px2vh(30);
    background: #F2F6FA;
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .basic-info {
      background: #fff;
      border-radius: px2vw(20);
      margin-bottom: px2vh(30);
    }
    .title-collap {
      font-size: px2vh(40);
      font-weight: bold;
      color: #666;
    }
    .imgHistory {
      width: px2vw(64);
      vertical-align: middle;
      margin-right: px2vw(20)
    }
    .small-title {
      font-size: px2vh(42);
      color: #333;
    }
    .mg {
      margin-bottom: px2vh(30);
    }
    .history-main {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      background: #fff;
      padding-top: px2vh(42);
      .image-list {
        width: px2vw(230);
        height: px2vw(230);
        flex-shrink: 0;
        margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(45) calc((100% - #{px2vw(690)}) / 6);
        img {
          width: px2vw(230);
          height: px2vh(230);
        }
      }
    }
  }
}
/deep/.van-collapse-item__content {
  padding: 0 px2vh(30);
}
/deep/.van-collapse-item__content {
  padding: 0 px2vh(30);
}

/deep/.van-collapse-item__content {
  padding-left: px2vw(30);
}
</style>
